<template>
    <el-card>
        <el-form ref="formDataRef" :rules="rules" :inline="true" :model="formData">
            <el-row>
                <el-form-item prop="moduleId" label="模块">
                    <el-select filterable clearable style="width: 150px" v-model="formData.moduleId"
                        placeholder="请选择模块">
                        <el-option v-for="item in modules" :label="item.name" :value="item.id" :key="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="tableName" label="表名">
                    <el-input style="width: 150px" v-model="formData.tableName" placeholder="请输入表名" clearable />
                </el-form-item>
                <el-form-item prop="className" label="实体">
                    <el-input style="width: 150px" v-model="formData.className" placeholder="实体名称" clearable />
                </el-form-item>
                <el-form-item prop="comment" label="备注">
                    <el-input style="width: 150px" v-model="formData.comment" placeholder="建议10汉字以内" clearable />
                </el-form-item>
                <el-form-item prop="author" label="作者">
                    <el-input style="width: 150px" v-model="formData.author" placeholder="输入作者信息" clearable />
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item prop="engine" label="引擎">
                    <el-select filterable clearable style="width: 150px" v-model="formData.engine" placeholder="请选择表引擎">
                        <el-option label="InnoDB" value="InnoDB" />
                        <el-option label="MyIsam" value="MyIsam" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="charset" label="编码">
                    <el-select filterable clearable style="width: 150px" v-model="formData.charset"
                        placeholder="请选择表编码">
                        <el-option label="utf8mb4" value="utf8mb4" />
                        <el-option label="utf8" value="utf8" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="backends" label="后端">
                    <el-select filterable multiple clearable :max-collapse-tags="0" collapse-tags style="width: 150px"
                        v-model="formData.backends" placeholder="选择后端文件">
                        <el-option label="Entity" value="entity" />
                        <el-option label="Controller" value="controller" />
                        <el-option label="Service" value="service" />
                        <el-option label="ServiceImpl" value="serviceImpl" />
                        <el-option label="Mapper" value="mapper" />
                        <el-option label="DTO" value="DTO" />
                        <el-option label="Vo" value="Vo" />
                        <el-option label="SQL" value="sql" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="model" label="模式">
                    <el-select filterable clearable :max-collapse-tags="0" collapse-tags style="width: 150px"
                        v-model="formData.model" placeholder="后端文件模式">
                        <el-option label="仅阅览" value="ov" />
                        <el-option label="生成文件" value="cf" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="fronts" label="前端">
                    <el-select filterable multiple clearable :max-collapse-tags="0" collapse-tags style="width: 150px"
                        v-model="formData.fronts" placeholder="选择前端文件">
                        <el-option label="index.vue" value="index.vue" />
                        <el-option label="index.ts" value="index.ts" />
                        <el-option label="type.ts" value="type.ts" />
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button type="warning">重置</el-button>
                </el-form-item>
            </el-row>
            <el-row>
                <el-table :data="formData.fieldList" max-height="400">
                    <el-table-column prop="name" label="字段名称">
                        <template #default="scope">
                            <el-form-item :prop="'fieldList.' + scope.$index + '.name'" :rules="columnRules.name">
                                <el-input style="width: 150px" placeholder="请输入字段名称" v-model="scope.row.name"
                                    clearable />
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="字段类型">
                        <template #default="scope">
                            <el-form-item :prop="'fieldList.' + scope.$index + '.type'" :rules="columnRules.type">
                                <el-select filterable clearable style="width: 150px" v-model="scope.row.type"
                                    placeholder="请选择字段类型">
                                    <el-option label="varchar" value="varchar" />
                                    <el-option label="int" value="int" />
                                    <el-option label="bigint" value="bigint" />
                                    <el-option label="text" value="text" />
                                    <el-option label="numeric" value="numeric" />
                                </el-select>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column prop="length" label="长度">
                        <template #default="scope">
                            <el-form-item :prop="'fieldList.' + scope.$index + '.length'">
                                <el-input-number style="width: 150px" placeholder="请输入字段长度"
                                    v-model="scope.row.length" />
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column prop="required" label="必填">
                        <template #default="scope">
                            <el-form-item :prop="'fieldList.' + scope.$index + '.required'">
                                <el-radio-group v-model="scope.row.required">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </template>
                    </el-table-column>

                    <el-table-column prop="defaultValue" label="默认值">
                        <template #default="scope">
                            <el-form-item :prop="'fieldList.' + scope.$index + '.defaultValue'">
                                <el-input style="width: 150px" placeholder="请输入默认值" v-model="scope.row.defaultValue" />
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="字段备注">
                        <template #default="scope">
                            <el-form-item :prop="'fieldList.columns.' + scope.$index + '.remark'">
                                <el-input style="width: 150px" placeholder="建议10汉字以内" v-model="scope.row.remark" />
                            </el-form-item>
                        </template>
                    </el-table-column>

                    <el-table-column fixed="right" label="操作">
                        <template #default="scope">
                            <el-form-item>
                                <el-button link type="primary" @click="removeIndex(scope.$index)">
                                    移除
                                </el-button>
                            </el-form-item>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button class="mt-4" style="width: 100%; margin-top: 15px" @click="onAddItem">
                    继续添加(id,create_time,update_time,is_delete 为内置字段,不要在此设置)
                </el-button>
            </el-row>
        </el-form>
    </el-card>

</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs } from 'vue'
import type { GenerateDTO, ColumnDTO } from '@/api/build/coder/type'
import type { Module, ModuleQueryDTO } from '@/api/build/module/type'
import { moduleList } from '@/api/build/module'
import { generate } from '@/api/build/coder'
import { ElNotification } from 'element-plus'

const props = defineProps({
    data: {
        type: Object,
        default: null,
    },
})

const initTableColumns = (): ColumnDTO => {
    return {
        name: '',
        type: 'varchar',
        length: 19,
        required: false,
        remark: '',
        defaultValue: '',
    }
}
const state = reactive({
    formData: props.data as GenerateDTO || {
        fieldList: [initTableColumns()],
    } as GenerateDTO,
    modules: [] as Module[],
    columnRules: {
        name: [
            {
                required: true,
                message: '字段不能为空',
                trigger: 'blur',
            },
        ],
        type: [
            {
                required: true,
                message: '字段类型不能为空',
                trigger: 'change',
            },
        ],
        remark: [
            {
                required: true,
                message: '字段备注不能为空',
                trigger: 'change',
            },
        ],
    },

    rules: {
        comment: [
            {
                required: true,
                message: '模块不能为空',
                trigger: 'change',
            },
        ],
        model: [
            {
                required: true,
                message: '模式不能为空',
                trigger: 'change',
            },
        ],
        moduleId: [
            {
                required: true,
                message: '模块不能为空',
                trigger: 'change',
            },
        ],
        engine: [
            {
                required: true,
                message: '引擎不能为空',
                trigger: 'change',
            },
        ],
        charset: [
            {
                required: true,
                message: '编码不能为空',
                trigger: 'change',
            },
        ],
        tableName: [
            {
                required: true,
                message: '表名不能为空',
                trigger: 'blur',
            },
        ],
    },
})
const formDataRef = ref()
const { formData, modules, rules, columnRules } = toRefs(state)

const onSubmit = async () => {
    await formDataRef.value?.validate()
    const result = await generate(formData.value)
    ElNotification({
        message: result.msg,
        type: 'success',
    })
}

const initModules = async () => {
    const result = await moduleList({} as ModuleQueryDTO)
    modules.value = result.data
}

const onAddItem = () => {
    formData.value.fieldList.push(initTableColumns())
}
const removeIndex = (index: number) => {
    formData.value.fieldList.splice(index, 1)
}
onMounted(() => {
    initModules()
})
</script>
